<template>
	<div>
		<div class="user_head_img">
			<image :src="userInfo.avatarUrl" mode="" style="width: 100px; height: 100px; border-radius: 50%;"></image>
		</div>
		<div v-if="is_vip_show"></div>
		<div class="user_box">
			<ul>
				<li><i class="iconfont icon-xiugainicheng"></i><span>昵称：</span>{{userInfo.nick_name}}</li>
				<li>
					<i class="iconfont icon-VIP"></i>{{userInfo.is_vip}}
				</li>
				<li><span>性别：</span>{{userInfo.gender}}</li>
				<li><i class="iconfont icon-yueguanli"></i><span>可用余额：</span>{{userInfo.grants.total_available}}<span>元</span>
				</li>
				<li>
					<i class="iconfont icon-riqi"></i><span>注册日期：</span> {{userInfo.created_at}}
				</li>
				<li>
					<i class="iconfont icon-kefu"></i>
					联系客服
				</li>
				<li @click="regards">
					<i class="iconfont icon-guanyu_o"></i>
					关于API_BUS
				</li>
				<li @click="system">
					<i class="iconfont icon-xitong"></i>
					系统设置
				</li>
			</ul>

		</div>
		<button type="warn" class="out_btn" @click="out_user">退出登录</button>
	</div>

</template>

<script>
	import {
		httpRequest
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				is_vip_show: false,
				userInfo: {
					"avatarUrl": "",
					"created_at": "",
					"gender": "",
					"grants": {
						"object": "",
						"total_granted": 0,
						"total_used": 0,
						"total_available": 0,
						"expire_at": 0
					},
					"is_vip": "",
					"nick_name": "",
					"open_id": "",
				}
			}
		},
		methods: {
			UserInfo() {
				if (this.$store.state.userInfo) {
					this.userInfo = this.$store.state.userInfo
				} else {
					httpRequest("/api/userinfo", "get").then((res) => {
						if (res.avatarUrl == "") {
							res.avatarUrl =
								"https://c-ssl.duitang.com/uploads/item/202005/10/20200510010150_2zSAt.jpeg"
						}
						if (res.is_vip === 0) {
							res.is_vip = "普通用户"
						} else {
							res.is_vip = "会员用户"
						}
						if (res.gender == 1) {
							res.gender = "靓仔"
						} else {
							res.gender = "靓女"
						}
						this.userInfo = res
						this.$store.commit("SetUserInfo", this.userInfo)
					})
				}
			},
			out_user() {
				uni.showModal({
					title: '退出程序',
					content: '您确定要退出APIBUS吗？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync("auth_token")
							uni.removeStorageSync("app_config_data")
							uni.reLaunch({
								url: "/pages/index/index"
							})
						} else {
							return
						}
					}
				});
			},
			/* 余额查询 */
			CreditGrants() {
				httpRequest("/api/credit_grants", "post").then(res => {
					this.userInfo.grants = res
					this.$store.commit("SetUserInfo", this.userInfo)
				}).catch(err => {

					uni.showToast({
						icon: 'error',
						title: err,
						position: 'center',
						duration: 1500
					})
				})
			},
			regards() {

				uni.navigateTo({
					url: "/pages/regards/index"
				})
			},
			// 系统配置
			system() {
				uni.navigateTo({
					url: "/pages/system/system"
				})
			}
		},

		mounted() {
			this.UserInfo()
			this.CreditGrants()
		},
		onShow() {
			this.CreditGrants()
		}
	}
</script>

<style scoped>
	.user_head_img {
		width: 100px;
		height: 100px;
		/* border: 1px solid; */
		margin: 15px auto;
	}

	.user_box {
		height: 100%;
		width: 88%;
		/* border: 1px solid; */
		margin: 15px auto;
		border-radius: 10px;
		/* border: 1px solid rgb(220, 223, 230); */
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 15px 15px;
	}

	.user_box>ul>li {
		height: 35px;
		padding-bottom: 3px;
		line-height: 35px;
		border-bottom: 1px solid rgb(245, 245, 245);
		margin-bottom: 15px;
	}

	.user_box>ul>li:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;

	}

	.user_box>ul>li>i {
		margin-right: 8rpx;
	}

	.out_btn {
		width: 95%;
	}
</style>